<template>
  <div class="main_box">
    <CommonHeader title="重点关注任务"></CommonHeader>
    <div class="detail_box">
      <div class="content">
        <div style="text-align: left; margin: 0 0 12px 0; color: #333333">批示标题：</div>
        <div
          class="title"
          :style="{
            'font-size': '16px',
            'line-height': '16px',
            color: '#000000',
            margin: '16px 0 12px 0',
          }">
          {{ query.title }}
        </div>
        <div style="text-align: left; margin: 20px 0 12px 0; color: #333333">提醒：</div>

        <div class="container">{{ query.content }}</div>
      </div>
      <div class="form_title" style="text-align: left; margin: 20px 0 12px 0; color: #333333">附件</div>
      <div class="file_box">
        <div class="file_list" v-if="fileInfo.annexName">
          <div class="file_item" @click="downloadFile(fileInfo.annexPath)">
            <i class="file_icon" :class="formateFileType(fileInfo.annexName)"></i>
            <div class="content">{{ fileInfo.annexName }}</div>
          </div>
        </div>
      </div>
      <!-- 非无限层级 ╮(╯▽╰)╭ 时间紧 任务重 不想设计优化  一股脑堆了 -->
      <div style="margin-top: 20px">
        <!-- 一级 -->
        <div
          class="first-box content"
          style="margin-top: 20px; overflow: hidden; transition: 0.3s max-height cubic-bezier(0.41, -0.01, 1, 1.09)"
          :style="{
            maxHeight: firstItem.show ? '1000px' : '63px',
          }"
          v-for="(firstItem, index) in taskInfo"
          :key="index">
          <div class="first-title" style="min-height: 53px; display: flex; align-items: center; justify-content: space-between">
            <div class="left" style="font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 70%">
              {{ firstItem.name }}
            </div>
            <div v-if="firstItem.name.length > 15" style="color: #4ca5f1" @click="checkTitle(firstItem.name)">查看全部</div>
            <van-icon :name="Boolean(firstItem.show) ? 'arrow-up' : 'arrow-down'" size="20" @click="switchShow(firstItem, firstItem.show)" />

            <!-- <div class="right" style="display: flex">
              <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" />
              <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div>
              <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px; margin-left: 5px" />
              <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div>
            </div> -->
          </div>
          <!-- 一级人员 -->
          <div class="first-person" v-if="(firstItem.receiptDoList !== null && firstItem.catalogType == 0) || !firstItem.childList">
            <!-- 绿牌统计 -->
            <div style="display: flex; margin: 12px 0 18px">
              <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" />
              <!-- <div style="margin-left: 5px">{{ firstItem.greenCount || 0 }}</div> -->
            </div>
            <!-- 绿牌人 -->
            <div style="width: 100%">
              <div class="th">
                <div class="td" style="width: 20%">姓名</div>
                <div class="td" style="width: 60%">职务</div>
                <div class="td" style="width: 20%">状态</div>
              </div>
              <div class="tbody" v-for="(person, i) in firstItem.receiptDoList.filter((v) => v.dutyType == 1)" :key="i">
                <div class="td" style="width: 20%">{{ person.empName }}</div>
                <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                <div
                  class="td"
                  style="width: 20%"
                  :style="{
                    color: person.checkStatus ? 'green' : 'red',
                  }">
                  {{ person.checkStatus ? '已查看' : '未查看' }}
                </div>
              </div>
            </div>
            <!-- 红牌统计 -->
            <div style="display: flex; margin: 12px 0 18px">
              <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px" />
              <!-- <div style="margin-left: 5px">{{ firstItem.redCount || 0 }}</div> -->
            </div>
            <!-- 红牌人 -->
            <div style="width: 100%">
              <div class="th">
                <div class="td" style="width: 20%">姓名</div>
                <div class="td" style="width: 60%">职务</div>
                <div class="td" style="width: 20%">状态</div>
              </div>
              <div class="tbody" v-for="(person, i) in firstItem.receiptDoList.filter((v) => v.dutyType == 0)" :key="i">
                <div class="td" style="width: 20%">{{ person.empName }}</div>
                <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                <div
                  class="td"
                  style="width: 20%"
                  :style="{
                    color: person.checkStatus ? 'green' : 'red',
                  }">
                  {{ person.checkStatus ? '已查看' : '未查看' }}
                </div>
              </div>
            </div>
          </div>
          <!-- 二级 -->
          <div
            class="second-box"
            v-for="(secondItem, secondIndex) in firstItem.childList"
            :key="secondIndex"
            style="margin: 0 auto; padding: 10px; border-radius: 8px; background: #fafafa">
            <div class="second-title" style="font-size: 12px; color: #333; font-weight: 500">
              <div class="left" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 80%">
                {{ secondItem.name }}
              </div>
              <div v-if="secondItem.name.length > 15" style="color: #4ca5f1" @click="checkTitle(secondItem.name)">查看全部</div>
            </div>

            <!-- 二级人员 -->
            <div class="second-person">
              <!-- 绿牌统计 -->
              <div style="display: flex; margin: 12px 0 18px">
                <img src="../../assets/image/green_tip.png" alt="" style="width: 18px; height: 18px" />
                <!-- <div style="margin-left: 5px">{{ secondItem.greenCount || 0 }}</div> -->
              </div>
              <!-- 绿牌人 -->
              <div style="width: 100%">
                <div class="th">
                  <div class="td" style="width: 20%">姓名</div>
                  <div class="td" style="width: 60%">职务</div>
                  <div class="td" style="width: 20%">状态</div>
                </div>
                <div class="tbody" v-for="(person, i) in secondItem.receiptDoList.filter((v) => v.dutyType == 1)" :key="i">
                  <div class="td" style="width: 20%">{{ person.empName }}</div>
                  <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                  <div
                    class="td"
                    style="width: 20%"
                    :style="{
                      color: person.checkStatus ? 'green' : 'red',
                    }">
                    {{ person.checkStatus ? '已查看' : '未查看' }}
                  </div>
                </div>
              </div>
              <!-- 红牌统计 -->
              <div style="display: flex; margin: 12px 0 18px">
                <img src="../../assets/image/red_tip.png" alt="" style="width: 18px; height: 18px" />
                <!-- <div style="margin-left: 5px">{{ secondItem.redCount || 0 }}</div> -->
              </div>
              <!-- 红牌人 -->
              <div style="width: 100%">
                <div class="th">
                  <div class="td" style="width: 20%">姓名</div>
                  <div class="td" style="width: 60%">职务</div>
                  <div class="td" style="width: 20%">状态</div>
                </div>
                <div class="tbody" v-for="(person, i) in secondItem.receiptDoList.filter((v) => v.dutyType == 0)" :key="i">
                  <div class="td" style="width: 20%">{{ person.empName }}</div>
                  <div class="td" style="width: 60%">{{ person.empArea }} {{ person.empPost || '' }}</div>
                  <div
                    class="td"
                    style="width: 20%"
                    :style="{
                      color: person.checkStatus ? 'green' : 'red',
                    }">
                    {{ person.checkStatus ? '已查看' : '未查看' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="file_box">
      <div class="file_item" @click="downloadFile(fileInfo.filePath)">
        <i class="file_icon pdf"></i>
        <div class="content">{{ fileInfo.name }}</div>
      </div>
    </div> -->
    <van-popup v-model="show">{{ checkTitleContent }}</van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';

export default {
  // eslint-disable-next-line
  name: 'LeaderDetail',
  components: {
    CommonHeader,
  },
  data() {
    return {
      quotaInfo: {},
      persons: [],
      fileInfo: {},
      taskInfo: [],
      show: false,
      checkTitleContent: '',
    };
  },
  computed: {
    formateState() {
      return function (state) {
        switch (state) {
          case '1':
            return '待反馈';
          default:
            return '已反馈';
        }
      };
    },
    formateFileType() {
      return function (fileName) {
        if (fileName) {
          const arr = fileName.split('.');
          const type = arr[arr.length - 1];
          if (type === 'docx' || type === 'doc') {
            return 'word';
          } else if (type === 'xlsx' || type === 'xls') {
            return 'word';
          } else if (type === 'pdf') {
            return 'pdf';
          } else {
            return '';
          }
        } else {
          return '';
        }
      };
    },
  },
  created() {
    this.query = this.$route.query;
    this.fileInfo = {
      annexPath: this.query.annexPath,
      annexName: this.query.annexName,
    };
    console.log(this.query);
    this.getDetail();
  },
  methods: {
    switchShow(obj, status) {
      this.$set(obj, 'show', !status);
    },
    checkTitle(title) {
      this.checkTitleContent = title;
      this.show = true;
    },
    getDetail() {
      this.$api.upLevelDutyDetail({ id: this.query.id }).then((res) => {
        if (res.status === 200) {
          this.taskInfo = res.data;
          console.log(this.taskInfo);
        }
      });
    },
    toDetail(status) {
      this.$router.push({
        path: '/feedbackDetailLead',
        query: {
          ...this.quotaInfo,
          status,
        },
      });
    },
    downloadFile(url) {
      window.open(url, '_blank');
    },
  },
};
</script>

<style scoped>
.th {
  display: flex;
  height: 36px;
  background: #f6f6fa;
  line-height: 36px;
  margin: 0 auto;
}
.th .td {
  text-align: center;
}
.tbody {
  display: flex;
  height: 36px;
  background: #fff;
  line-height: 36px;
  margin: 0 auto;
}
.tbody .td {
  text-align: center;
}
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.detail_box {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 10px 15px;
  box-sizing: border-box;
  overflow-y: auto;
}
.detail_box .content {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  text-align: left;
}
.detail_box .content .head {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  position: relative;
}
.detail_box .content .head::before {
  content: '';
  display: block;
  width: 4px;
  height: 18px;
  background-color: #367fff;
  position: absolute;
  left: 0;
  top: 3px;
}
.detail_box .content .table_content {
  border-top: 1px solid #efefef;
}
.table_thead,
.table_tbody {
  display: flex;
  padding: 10px;
  color: #d3d7e0;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
.table_thead .th,
.table_tbody .td {
  width: 33.3%;
  text-align: center;
  box-sizing: border-box;
}
.table_tbody .td {
  color: #a3a7ad;
}
.table_tbody .td.blue {
  color: #4ca5f1;
}
.table_tbody .td.red {
  color: #f60e36;
}
.file_box {
  /* position: fixed; */
  /* left: 0; */
  /* bottom: 20px; */
  width: 100%;
  /* padding: 15px; */
  box-sizing: border-box;
}
.file_box .file_item {
  display: flex;
  font-size: 14px;
  color: #2a81e6;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
  /* box-shadow: 3px 3px 3px #dcdcdc; */
}
.file_box .file_item .content {
  width: calc(100% - 60px);
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_box .file_item .file_icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url('../../assets/image/file.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.file_box .file_item .file_icon.pdf {
  background: url('../../assets/image/Pdf.png') no-repeat;
  background-size: 100% 100%;
}
.file_box .file_item .file_icon.word {
  background: url('../../assets/image/word.png') no-repeat;
  background-size: 100% 100%;
}
.file_box .file_item .file_icon.excel {
  background: url('../../assets/image/excel.png') no-repeat;
  background-size: 100% 100%;
}
</style>